<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keyword" content="">
    <!-- <link rel="shortcut icon" href="img/favicon.png"> -->
    <title>意向单审批</title>
    <!-- <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="css/style.css">
    <style type="text/css">
        .weui-label{width:120px;}
    </style>
</head>

<body>
    <div class="page__bd">
        <div class="weui-cells__title">意向单信息</div>
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="" class="weui-label">客户名称</label></div>
                <div class="weui-cell__bd">上汽</div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="" class="weui-label">项目周期</label></div>
                <div class="weui-cell__bd">4</div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="" class="weui-label">审批计划</label></div>
                <div class="weui-cell__bd"><span class="text-primary">利润不低于15%</span></div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="" class="weui-label">意向单处理状态</label></div>
                <div class="weui-cell__bd">审批中</div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="" class="weui-label">填写部门</label></div>
                <div class="weui-cell__bd">市场部</div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="" class="weui-label">产品名称</label></div>
                <div class="weui-cell__bd">附件</div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="" class="weui-label">意向单类别</label></div>
                <div class="weui-cell__bd"></div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="" class="weui-label">可行性分析报告</label></div>
                <div class="weui-cell__bd"></div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="" class="weui-label">填写日期</label></div>
                <div class="weui-cell__bd">2017-04-21</div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="" class="weui-label">填写人</label></div>
                <div class="weui-cell__bd">邱建苗</div>
            </div>
        </div>
        <div class="weui-cells__title">审批意见信息</div>
        <div class="weui-cells pd-15">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>审批节点</th>
                            <th>审批结果</th>
                            <th>审批人</th>
                            <th>审批意见</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>可行性分析</td>
                            <td><span class="text-danger">不通过</span></td>
                            <td>张三</td>
                            <td>设计不够详细，过于粗糙</td>
                        </tr>
                        <tr>
                            <td>可行性分析</td>
                            <td><span class="text-success">通过</span></td>
                            <td>李四</td>
                            <td>同意</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="weui-btn-area">
            <button id="approve" class="weui-btn weui-btn_primary">审批</button>
        </div>
    </div>
    <div class="weui-footer weui-footer_fixed-bottom0">
        <p class="weui-footer__text">Copyright &copy; 2016-2017 宙能信息. All rights reserved.</p>
    </div>
    <!--BEGIN toast-->
    <div id="toast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-icon-success-no-circle weui-icon_toast"></i>
            <p class="weui-toast__content">审批完成</p>
        </div>
    </div>
    <!-- loading toast -->
    <div id="loadingToast" style="display:none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">审批中&hellip;</p>
        </div>
    </div>
    <div id="dialogs">
        <!--BEGIN dialog1-->
        <div class="js_dialog" id="iosDialog1" style="display: none;">
            <div class="weui-mask"></div>
            <div class="weui-dialog appraise-dialog">
                <!-- <div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div> -->
                <div class="weui-dialog__bd">
                    <textarea name="" id="" rows="4" class="weui-textarea" placeholder="请输入回复意见"></textarea>
                </div>
                <div class="weui-dialog__ft">
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">取消</a>
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">审批</a>
                </div>
            </div>
        </div>
        <!--END dialog1-->
    </div>
    <!-- <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> -->
    <!-- <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
    <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
    <script>
    (function($) {
        var $toast = $('#toast');
        var $loadingToast = $('#loadingToast');
        var $iosDialog1 = $('#iosDialog1');

        // 审批操作
        var approve = function () {
            if ($loadingToast.css('display') != 'none') return;

            $loadingToast.show();
            // ajax submit
            setTimeout(function () {
                $loadingToast.hide();
                if ($toast.css('display') != 'none') return;

                $toast.show();
                setTimeout(function () {
                    $toast.hide();
                }, 1000);
            }, 2000);
        }

        // 审批按钮
        $('#approve').on('click', function () {
            $iosDialog1.show(200);
        });

        $('#dialogs').on('click', '.weui-dialog__btn', function(){
            $(this).parents('.js_dialog').hide(200);
            if ($(this).hasClass('weui-dialog__btn_primary')) {
                approve();
            }
        });
    })(Zepto);
    </script>
</body>

</html>
